<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<mine :name='name1' :city='city' :title='title' :content='content' ></mine>
			<!--左侧字段为props的声明的名字，在html写成肉串式，但是在props中写成驼峰式。
				右侧为父级里定义的名字，data里的名字-->
		</div>
		<template id="myadd">
			<div>
				<h1>{{name}}</h1>
				<h2>{{city}}</h2>
				<h3>{{title}}</h3>
				<h4>{{content}}</h4>
			</div>
		</template>
		<script type="text/javascript">
			Vue.component('mine',{//必须先注册自己的组件，再挂载到div上，这样才能显示成功
				//如果是先挂载，再注册不会显示出来，也不报错
				template:'#myadd',
				props:['name','city','title','content']
			});
			var vm = new Vue({
//				el:'#app'
				el:'#app',
				data:{
					name1:'yihui',
					city:'yongan',
					title:'Welcome',
					content:'Hello'
				}
			});
		</script>
	</body>
</html>
